<template>
    <div class="conant">
        <el-form label-width="120px">
            <el-form-item label="分类名称">
                <el-input v-model="addMenu.name" type="text" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="上级分类">
                <el-select v-model="value" class="m-2" placeholder="Select" size="large">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="数量单位">
                <el-input type="text" />
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="addMenu.sort" type="text" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="是否显示">
                <el-radio-group v-model="addMenu.showStatus" class="ml-4">
                    <el-radio label="1" size="large">是</el-radio>
                    <el-radio label="2" size="large">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否显示在导航栏">
                <el-radio-group v-model="addMenu.navStatus" class="ml-4">
                    <el-radio label="1" size="large">是</el-radio>
                    <el-radio label="2" size="large">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="分类图标">
                <el-upload v-model:file-list="fileList" class="upload-demo"
                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple
                    :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :limit="3"
                    :on-exceed="handleExceed">
                    <el-button type="primary">上传文件</el-button>
                    <template #tip>
                        <p>只能上传jpg/png文件，且不超过100kb</p>
                    </template>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary">新增</el-button>
            </el-form-item>
            <el-form-item label="关键词">
                <el-input type="text" placeholder="请输入角色描述" />
            </el-form-item>
            <el-form-item label="分类描述">
                <el-input type="text" placeholder="请输入角色描述" />
            </el-form-item>
            <el-form-item>
                <el-button>取消</el-button>
                <el-button>确定</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { Ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { useRoute } from "vue-router"
import useTable from '../../hooks/useTables'
import * as api from '../../request/api'
import { IProductCategoryChildrenItem } from '../../request/PmsAdminConreiller/index'
const route: any = useRoute().query
console.log(route);

const value = ref('')
//下拉框
const options = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
    {
        value: 'Option3',
        label: 'Option3',
    },
    {
        value: 'Option4',
        label: 'Option4',
    },
    {
        value: 'Option5',
        label: 'Option5',
    },
]
//单选框
const radio1 = ref('1')
const radio2 = ref('1')

//请求
const addMenusfrom = ref({}) as Ref<IProductCategoryChildrenItem>
const addMenu = ref({}) as Ref<IProductCategoryChildrenItem>
if (!route.id) {
    addMenu.value = addMenusfrom.value
} else if (route) {
    const change = async () => {
        const res = await api.product.getCommodityEditor(route.id)
        addMenu.value = res
        console.log(res);
    }
    change()
}
//上传
const fileList = ref<UploadUserFile[]>([
])

const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
    console.log(file, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
    console.log(uploadFile)
}

const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
    ElMessage.warning(
        `The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length
        } totally`
    )
}

const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
    return ElMessageBox.confirm(
        `Cancel the transfer of ${uploadFile.name} ?`
    ).then(
        () => true,
        () => false
    )
}
</script>

<style lang="scss" scoped>
.conant {
    width: 850px;
    height: 100vh;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    margin: 60px auto;
    padding: 40px;

    .el-form-item {
        :deep .el-form-item__label {
            width: 150px;
        }

        :deep .el-input {
            width: 530px;
            height: 50px;
            padding-left: 10px;
        }
    }

}
</style>